import React, { useCallback, useImperativeHandle, useRef, useState } from 'react';
import { intl } from '@/utils';
import DataGrid, { Column, Paging } from 'devextreme-react/data-grid';
import { useModel } from 'umi';
import { getOnlineProjectList } from '../service';
import { getStackStatus } from '@/pages/projectManager/tools';
import './index.less';
import PubSub from 'pubsub-js';

// const DEFAULT_COLUMN_WIDTHS = {
//     projectCode: 150,
//     projectName: 200,
//     projectState: 100
// };

const ProjectPopup = React.forwardRef((props: any, ref: any) => {
    const { clearZcbfSeach } = props;
    const { initialState } = useModel('@@initialState');
    const { curUser }: any = initialState;
    const [modalTableData, setModalTableData] = useState<any>([]);
    const [allowedPageSizes] = useState<any>([5, 10, 20, 30]);
    const dataGridRef = useRef<any>();
    const [projectXmzt, setProjectXmzt] = useState<string>('190');
    // const [columnWidths, setColumnWidths] = useState<any>(DEFAULT_COLUMN_WIDTHS);

    // const handleResetColumnWidths = () => {
    //     setColumnWidths(DEFAULT_COLUMN_WIDTHS);
    // };


    const dataGridList = useCallback(async (xmzt: any) => {
        const res = await getOnlineProjectList({ usercode: curUser.usercode, xmzt });
        if (res.success) {
            setModalTableData(res.data.rows);
        }
    }, []);

    useImperativeHandle(ref, () => ({
        getDataGrid: () => {
            dataGridList('190');
        },
        getSelectedRowsProjectData: () => {
            return dataGridRef.current.instance.getSelectedRowsData();
        },
        clearSelectionDataGrid: () => {
            dataGridRef.current.instance.clearSelection();
            setProjectXmzt('190');
            // dataGridRef.current.instance.resetOption('columnResizingMode');
            // handleResetColumnWidths();
            // console.log(dataGridRef.current.instance);
            // dataGridRef.current.instance.beginUpdate();
            // dataGridRef.current.instance.refresh();
            // dataGridRef.current.instance.endUpdate();
            return dataGridRef.current.instance.clearFilter();
        },
    }));

    const onTableSelection = useCallback(({ selectedRowsData }: any) => {
        clearZcbfSeach();
        // dataGridRef.current.instance.clearFilter();
        if (selectedRowsData[0]) {
            PubSub.publish('ProjectPopupInfo', { msg: 'ProjectPopupInfoData', data: selectedRowsData[0] });
        }
    }, []);

    return (
        <DataGrid
            ref={dataGridRef}
            className="ProjectPopupGrid"
            height={`calc(100% )`}
            dataSource={modalTableData}
            keyExpr="projectCode"
            allowColumnReordering={true}
            showColumnLines={true}
            showRowLines={true}
            showBorders={true}
            columnMinWidth={100}
            allowColumnResizing={true}
            hoverStateEnabled={true}
            columnResizingMode="widget"
            onSelectionChanged={onTableSelection}
            selection={{ mode: "single" }}
            scrolling={{ rowRenderingMode: 'virtual' }}
            loadPanel={{ enabled: true }}
            // columnWidths={columnWidths}
            // onColumnResized={({ element, column }: any) => {
            //     setColumnWidths((prevColumnWidths: any) => ({
            //         ...prevColumnWidths,
            //         [column.dataField]: element.clientWidth
            //     }));
            // }}

            // onOptionChanged={(e) => {
            //     console.log('@@@', e);
            //     if (e.fullName === "searchPanel.text") {
            //         clearZcbfSeach();
            //     }
            // }}
            searchPanel={{ width: 220, visible: true, placeholder: '' }}
            toolbar={{
                items: [
                    {
                        location: 'before',
                        widget: 'dxSelectBox',
                        options: {
                            displayExpr: "name",
                            valueExpr: "id",
                            value: projectXmzt,
                            onValueChanged: (e: any) => {
                                const { value } = e;
                                setProjectXmzt(value)
                                dataGridList(value);
                                clearZcbfSeach();
                            },
                            items: [
                                { id: '', name: '全部' },
                                { id: '190', name: '未归档' },
                                { id: '192', name: '归档中' },
                                { id: '200', name: '已归档' }
                            ],
                        },
                    },
                    {
                        name: 'searchPanel',
                        location: 'after',
                    }
                ]
            }}
            pager={{
                visible: true,
                showPageSizeSelector: true,
                showNavigationButtons: true,
                displayMode: 'compact',
                showInfo: true,
                allowedPageSizes: allowedPageSizes
            }}
        >
            <Column
                width={150}
                caption={intl('pro.TreeList.ComponentNumber', '项目编号')}
                dataField='projectCode'
            />
            <Column
                // width={200}
                caption={intl('pro.DataGrid.ProjectName', '项目名称')}
                dataField='projectName'
            />
            <Column
                caption='项目状态'
                dataField='projectState'
                fixed={true}
                fixedPosition='right'
                width={100}
                cellRender={(data: any) => (
                    getStackStatus(data.value)
                )}
            />
            <Paging defaultPageSize={10} />
        </DataGrid>
    );
});

export default ProjectPopup;
